<template>
	<el-dialog 
		v-model="dialogFormVisible"
		width="40%"
		@close="close"
		:title="title">
		<div class="inputList">
			<div class="inputListName verMiddle">
				<span style="color:red;">*</span>
				<span>名称：</span>
			</div>
			<el-input v-model="sideBarName" placeholder="请输入侧边栏展示的名称" clearable />
		</div>
		<div class="inputList">
			<div class="inputListName verMiddle">
				<span style="color:red;">*</span>
				<span>name属性：</span>
			</div>
			<el-input v-model="name" placeholder="请输入页面的英文名称，必须唯一" clearable />
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="close">取消</el-button>
				<el-button type="primary" @click="confrim">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script type="text/javascript">
	
export default{
	props:{
		createPageType:""
	},
	data () {
		return {
			dialogFormVisible:true,
			name:"",
			sideBarName:"",
			title:""
		}
	},
	mounted (){
		if(this.createPageType == 'sidebar'){
			this.title = "请输入路由信息";
		}else if(this.createPageType == 'detail'){
			this.title = "请输入详情页面路由信息";
		}
	},
	watch:{
		
	},
	components : {
		
	},
	methods : {
		close(){
			this.$mitt.emit("closeDialog");
		},
		confrim(){
			if(this.name.value == '' || this.sideBarName.value == ''){
				this.$message.error("必填字段不能为空")
				return
			}
			var routeParams = {
				name:this.name,
				path:this.name,
				sideBarName:this.sideBarName
			}
			if(this.createPageType == 'sidebar'){
				this.$mitt.emit("confrimDialog",routeParams);
			}else if(this.createPageType == 'detail'){
				let pathArr = this.$pinia.state.value.routeConfig.nowItem.path.split('/');
				let newPathArr = pathArr.slice(0,pathArr.length - 1);
				let usePath = newPathArr.join('/');
				routeParams.path = `${usePath}/${routeParams.path}`;
				routeParams.belongTo = this.$pinia.state.value.routeConfig.nowItem.name;
				this.$mitt.emit("confrimDetailDialog",routeParams);
			}
		}
	}
}
</script>
<style type="text/css" lang="less" scoped>
	.inputList{
		overflow: hidden;
		margin-bottom: 10px;
	}
	.inputListName{
		float: left;
		width:18%;
		line-height:40px;
		text-align: right;
	}
	.inputListName.select{
		width: 30%;
	}
	.el-input{
		float: left;
		width: 50%;
	}
</style>
